<template>
  <base-layout
    :dialogVisible="dialogVisible"
    :dialogTitle="dialogTitle"
    @dialog-close="dialogClose"
    :visibleContent2="false"
  >
    <template #searchPanel>
      <el-form
        :inline="true"
        ref="fromdata"
        :model="form"
        :rules="rules"
        label-width="90px"
        label-position="right"
      >
        <el-row class=''>
          <el-col :span="12">保险分公司信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-form-item label="保险分公司名称:" prop="companyName">
            <el-input
              v-model="form.companyName"
              clearable
              maxlength="30"
              placeholder="保险公司名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属保险公司:" prop="parentCompanyId">           
            <el-select
              clearable
              v-model="form.parentCompanyId"
              placeholder="所属门店"
            >
              <el-option
                v-for="item in companyList"
                :key="item.id"
                :value="item.id"
                :label="item.companyName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="公司地址:" prop="address">
            <el-input
              v-model="form.address"
              clearable
              placeholder="公司地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属城市:" prop="cityCode">
            <CitySelect v-model="form.cityCode" placeholder="所属城市" />
          </el-form-item>
          <el-form-item label="所属区县:" prop="countyCode">
            <District
              v-model="form.countyCode"
              :cityCode="form.cityCode"
              placeholder="所属区县"
            />
          </el-form-item>
          <el-form-item label="联系人:" prop="contactName">
            <el-input
              v-model="form.contactName"
              clearable
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话:" prop="contactPhone">
            <el-input
              v-model="form.contactPhone"
              clearable
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-row>
          <el-col :span="24">
            <el-form-item label="主营业务:" prop="note">
              <el-input
                type="textarea"
                :rows="6"
                placeholder=""
                v-model="form.note"
                style="width: 600px"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        </el-row>
      </el-form>
    </template>
    <template #contentPanel>
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="save">保存</el-button>
      </el-row>
    </template>
  </base-layout>
</template>

<script>
import baseMixin from "@/mixins/base";
import { CarBrand } from "@/components/index";
import { 
  getCompanyDetail,
  createInsuranceCompany, 
  updateInsuranceCompany, 
  dataList
} from '@/api/after-sale/systemManage/insurance'
export default {
  components: {
    CarBrand,
  },
  mixins: [baseMixin({})],
  data() {
    return {
      form: {
        type: 2
      },
      rules: {
        companyName: [{ required: true,  message: '请输入', trigger: ['blur', 'change'] }],
        cityCode: [{ required: true,  message: '请输入', trigger: ['blur', 'change'] }],
        contactName: [{ required: true,  message: '请输入', trigger: ['blur', 'change'] }],
        companyCode: [{ required: true,  message: '请输入', trigger: ['blur', 'change'] }],
        contactPhone: [{ required: true,  message: '请输入', trigger: ['blur', 'change'] }],
        countyCode: [{ required: true,  message: '请输入', trigger: ['blur', 'change'] }],
        note: [{ required: true,  message: '请输入', trigger: ['blur', 'change'] }],
        parentCompanyId: [{ required: true,  message: '请选择', trigger: ['blur', 'change'] }],
        address: [{ required: true,  message: '请输入', trigger: ['blur', 'change'] }],
      },
      companyList: [],
    };
  },
  mounted() {
    let { id } = this.$route.query;
    if (id) {
      this.form.id = id;
      getCompanyDetail(id).then((res) => {
        let { success, data } = res;
        if (success) {
          this.form = { ...this.form, ...data };
        }
      });
    }
    this.getCompany();
  },
  methods: {
    async getCompany() {
      const {success, data} = await dataList({type: 1}, 1000, 1);
      if (success) {
        this.companyList = data.content;
      }
    },
    //保存
    save() {
      this.$refs["fromdata"].validate((valid) => {
        if (valid) {
          this.submit();
        } else {
          return
        }
      });      
    },
    async submit() {
      const { success } = this.form.id ? await updateInsuranceCompany(this.form) : await createInsuranceCompany(this.form);
      if (success) {
        this.$message.success("保存成功");
        this.closeRouter();
      }
    }
  },
};
</script>
<style lang="scss" scoped></style>
